<template>
    <div class="user-info-main">
        <img
            class="concat-inviter-btn"
            src="@/assets/images/userCenter/concat-inviter-btn.png"
            @click="concat"
        />
        <div class="user-info">
            <div
                class="user-header-box"
                @click="goUserInfo"
            >
                <img
                    class="user-header"
                    :src="userInfo.face"
                />
            </div>
            <div class="user-info-box">
                <div class="user-name">
                    <span class="user-name-ellipsis">{{userInfo.nick_name}}</span>
                    <span class="user-level">{{userLevel[userInfo.vip_level]}}</span>
                </div>
                <div class="user-id">
                    邀请码：{{userInfo.id}}
                </div>
            </div>
        </div>
        <div
            class="user-other-info"
            v-if="userInfo.vip_level>1"
        >
            <div
                class="nav-item"
                @click="goIncomeDetail"
            >
                <div class="nav-info">{{userAccountInfo.income_history | currency}}</div>
                <div class="nav-name">累计收益(元)</div>
            </div>
            <div class="line"></div>
            <div
                class="nav-item"
                @click="goUserAccount"
            >
                <div class="nav-info">{{userAccountInfo.money | currency}}</div>
                <div class="nav-name">余额(元)</div>
            </div>
            <div class="line"></div>
            <div
                class="nav-item"
                @click="goWaitingAccount"
            >
                <div class="nav-info">{{userAccountInfo.money_on_way | currency}}</div>
                <div class="nav-name">待到账(元)</div>
            </div>
            <div class="line"></div>
            <div class="nav-item">
                <div class="nav-info">{{userAccountInfo.force/100}}</div>
                <div class="nav-name">功勋值</div>
            </div>
        </div>
        <!-- <div
            class="user-data"
            v-if="userInfo.vip_level>0"
        >
            <div class="user-data-item">
                <img
                    class="user-data-img"
                    src="@/assets/images/userCenter/my-data-icon.png"
                />
            </div>
            <div
                class="user-data-item"
                @click="goTeamList('myData','2,3,4')"
            >
                <div class="data-detail">{{parseInt(teamVipData.level_2)+parseInt(teamVipData.level_3)+parseInt(teamVipData.level_4)}}</div>
                <div class="data-title">店主</div>
            </div>
            <div
                class="user-data-item"
                @click="goTeamList('myData','1')"
            >
                <div class="data-detail">{{myVipData.level_1}}</div>
                <div class="data-title">会员</div>
            </div>
            <div
                class="user-data-item"
                @click="goTeamList('myData','0')"
            >
                <div class="data-detail">{{myVipData.level_0}}</div>
                <div class="data-title">游客</div>
            </div>
        </div> -->
    </div>
</template>

<script>
export default {
    name: 'UserInfo',
    props: ['userInfo', 'userAccountInfo', 'myVipData', 'teamVipData'],
    data() {
        return {
            userLevel: ['游客', '普通会员', '店主', '金牌店主', '服务商']
        }
    },
    methods: {
        goIncomeDetail() {
            this.$router.push('/userCenter/incomeDetail')
        },
        goWaitingAccount() {
            this.$router.push('/userCenter/watingAccount')
        },
        goUserAccount() {
            this.$router.push('/userCenter/userAccount')
        },
        goUserInfo() {
            this.$router.push('/userInfo')
        },
        concat() {
            this.$emit('concatShow')
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.user-info-main
    position relative
    padding 0.69rem 0
    background-image url('../../../assets/images/userCenter/user-info-bg.png')
    background-repeat repeat
    background-size 100%
    .concat-inviter-btn
        position absolute
        right 0
        top 0.8rem
        height 0.72rem
    .user-info
        display flex
        align-items center
        padding 0 0.4rem
        .user-header-box
            width 1.25rem
            height 1.25rem
            overflow hidden
            border-radius 100%
            .user-header
                width 100%
                height 100%
        .user-info-box
            flex 1
            min-width 1px
            padding 0 1.52rem 0 0.21rem
            .user-name
                display flex
                align-items center
                .user-name-ellipsis
                    max-width 4rem
                    white-space nowrap
                    overflow hidden
                    text-overflow ellipsis
                    font-size 0.4rem
                    color #fff
                .user-level
                    padding 0.1rem 0.2rem
                    background #d7463c
                    font-size 0.29rem
                    color #fff
                    border-radius 30px
                    line-height 1.2
                    margin-left 0.26rem
            .user-id
                display flex
                font-size 0.34rem
                color #fff
                margin-top 0.18rem
    .user-other-info
        display flex
        align-items center
        margin-top 0.69rem
        .nav-item
            flex 1
            text-align center
            .nav-info
                font-size 0.37rem
                color #fff
            .nav-name
                font-size 0.29rem
                color #fff
                margin-top 0.18rem
        .line
            width 1px
            height 0.4rem
            background #fff
    .user-data
        display flex
        align-items center
        height 1.61rem
        margin 0.42rem 0.29rem 0 0.29rem
        background #d7463c
        border-radius 5px
        .user-data-item
            flex 1
            text-align center
            .user-data-img
                width 1.1rem
            .data-detail
                font-size 0.37rem
                color #fff
            .data-title
                margin-top 0.18rem
                font-size 0.36rem
                color #fff
        .user-data-item:nth-child(1)
            border-right 1px solid #fff
</style>


